(0112 601 803 /0766 560 002

Web: www.aict.lk

Reg No: W/P 81396

Professional Full Stack Web Developer (MERN Stack)

Module 1: The Foundation (Weeks 1-3)

Goal: Build static, responsive websites.

· Web Fundamentals: How the internet works (HTTP/HTTPS, DNS, Browsers).

· HTML5 Mastery: Semantic HTML, Forms, Validations, SEO basics.

· CSS3 & Modern Styling:

o Flexbox & Grid systems (Crucial for modern layout).

o Responsive Design (Media Queries) for Mobile-First development.

o Frameworks: Tailwind CSS (Trending) and Bootstrap 5.

· Project 1: Build a Personal Portfolio Website.

Module 2: JavaScript Logic & Algorithms (Weeks 4-6)

Goal: Make websites interactive and learn programming logic.

· Core JS: Variables, Data Types, Loops, Functions.

· DOM Manipulation: Selecting elements, Event Listeners (Click, Hover, Submit).

· Modern ES6+ Features: Arrow Functions, Destructuring, Spread Operator, Template Literals.

· Asynchronous JS: Promises, Async/Await, Fetch API (Consuming JSON data).

· Project 2: Weather App (Fetching live weather data from an open API).

Module 3: Frontend Mastery with React.js (Weeks 7-10)

Goal: Build Single Page Applications (SPAs) like Facebook or Instagram.

· React Basics: JSX, Components, Props.

· Hooks: useState, useEffect (The modern way to write React).

· Routing: React Router v6 (Navigating without page reloads).

· State Management: Context API (Managing data across the app).

· Project 3: E-commerce Product Page with Cart Functionality.

Module 4: Backend Engineering (Weeks 11-13)

Goal: Create your own server and API.

· Node.js Environment: Installing Node, NPM (Node Package Manager).

· Express.js Framework: Setting up a server, Routing (GET, POST, PUT, DELETE).

· RESTful APIs: Building API endpoints to send data to the frontend.

· Middleware: Handling errors and authentication checks.

· Tools: Using Postman to test APIs.

Module 5: Database Management (Weeks 14-15)

Goal: Store and manage user data permanently.

· MongoDB (NoSQL): Cloud setup with MongoDB Atlas (Free tier).

· Mongoose ODM: Creating Schemas and Models.

· CRUD Operations: Create, Read, Update, Delete data from the database.

· Project 4: "Task Manager API" (Backend only).

Module 6: Security & Authentication (Week 16)

· Authentication: User Registration & Login logic.

· Security: Hashing passwords (Bcrypt.js) and JWT (JSON Web Tokens) for secure sessions.

Module 7: Full Stack Integration & Deployment (Weeks 17-18)

Goal: Connect Frontend + Backend and go live.

· Connecting the Dots: Fetching data from your own backend into your React Frontend.

· Deployment:

o Frontend: Vercel or Netlify.

o Backend: Render or Railway.

o Database: MongoDB Atlas.

· DevOps Basics: Git & GitHub (Commit, Push, Pull requests).

Module 8: The "New Tech" Edge (Week 19)

Differentiation: This is what most other institutes don't teach yet.

· AI for Developers: How to use ChatGPT and GitHub Copilot to debug code and write boilerplate faster.

· Next.js Intro: A brief 2-hour introduction to Next.js (The future of React) to show students the path forward.

Final Capstone Project (Weeks 20-24)

Students must build one of the following to graduate:

1. Full E-commerce Platform: (User login, Product catalog, Cart, Checkout simulation).

2. Social Media Dashboard: (Post updates, Like posts, User profiles).

3. School Management Portal: (Student login, View marks, Download reports).

Certification Levels

Level 3: Certified Web Designer (The Foundation)

Focus: Creating beautiful, responsive static websites. No heavy programming logic yet. Output: Student can build a personal portfolio or a simple business website.

• 1: Web Essentials: How the web works, Semantic HTML5, SEO tags.
• 2: CSS Mastery: Flexbox, Grid, Colors, Fonts, Mobile Responsiveness (Media Queries).
• 3: Frameworks: Bootstrap 5 & Introduction to Tailwind CSS (Speeding up design).
• 4: Deployment & Project: Buying a domain/hosting, using cPanel, uploading files via FTP.
• Final Project: 5-Page Business Website for a fictional company.

Level 4: Professional Frontend Developer (Interactive UI)

Focus: Making websites "think" and interact. Learning React.js.

Output: Student can build interactive apps (Weather app, Todo list, Dashboard).

• 1: JavaScript Core: Variables, Loops, Functions, DOM Manipulation (Click events).
• 2: Advanced JS: ES6+, Arrow Functions, Fetch API (Getting data from servers), JSON.
• 3: React Basics: Components, Props, State, Virtual DOM.
• 4: React Hooks: useState, useEffect, Managing forms.
• 5: Routing & State: React Router (Multi-page apps), Context API.
• 6: Project Work: Connecting to a public API (e.g., Movie Database).
• Final Project: Movie Search App or Weather Dashboard.

Level 5: Certified Full Stack Engineer (Backend & API)

Focus: Server-side engineering, Databases, and Security.

Output: Student can build a fully functional system with login/signup.

• 1: Node.js & Express: Setting up a server, REST API structure (GET, POST).
• 2: MongoDB (NoSQL): Database design, Collections, CRUD operations (Create, Read, Update, Delete).
• 3: Authentication: User Login, Sign up, Password Hashing (Bcrypt), JWT Tokens.
• 4: Full Integration: Connecting React Frontend to Node Backend.
• 5: Deployment: Deploying Backend to Render/Railway and Frontend to Vercel/Netlify.
• 6: Capstone: Final troubleshooting and professional code review.
• Final Project: E-commerce Cart System with Admin Panel.